<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model列表框 select类型</title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 列表框单选时，v-model绑定的是选项的值；多选时，v-model绑定的是一个数组，被选中的选项会被保存到数组中。-->
        <!-- 选择一个 v-model绑定的是选项的值-->
        <select name="abc" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="梨子">梨子</option>
            <option value="香蕉">香蕉</option>
            <option value="橘子">橘子</option>
        </select>
        <h2>{{fruit}}</h2>
        <!-- 选择多个  v-model绑定的是一个数组-->
        <!-- 按住ctrl就可以多个选择 -->
        <select name="abc" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="梨子">梨子</option>
            <option value="香蕉">香蕉</option>
            <option value="橘子">橘子</option>
        </select>
        <h2>{{fruits}}</h2>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{ 
                msg:'hello world',
                fruit:'苹果',//默认值
                fruits:[]
            }
        })
    </script>   
</body>
</html>